import React, { Component } from 'react'
import { Form, Icon, Input, Button, Checkbox, Card } from 'antd';
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { login } from '../../actions/user'
import './login.less'
import { Fragment } from 'react';
const mapState = state => ({
    isLogin: state.user.isLogin,
    isLoading: state.user.isLoading
})

@connect(mapState, { login })
@Form.create()
class Login extends Component {
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.login(values)
            }
        })
    }

    componentDidMount() {
        const dom = document.getElementById('myCanvas');

    }

    // 绘制背景
    drawBackgroud() {


    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Fragment>
                <div className="shadow mb-5 bg-light rounded login-top">
                    <div className="head">
                        <img src={login} />
                        <span>
                            <h1>·</h1>登录
                        </span>
                    </div>
                </div>
                <div class="login-box">
                    <div class="tree">
                        <img src="./images/2.png" class="img-fluid" />
                    </div>
                    <div class="slogan">
                        克勤之致<br><span class="yellow">结青藤</span>之缘
        </div>
                        <div id="earth" class="earth">
                            <img src="./images/1.png" class="img-fluid" />
                        </div>

                        <div class="login">
                            <div class="login-logo">
                                <img src="./images/logo.png" class="img-fluid" />
                            </div>
                            <div class="login-other">
                                <div onclick='toQzoneLogin()'><img src="./images/icon/QQ-line.png" /></div>
                                <div onclick='toweChat()'><img src="./images/icon/wx-line.png" /></div>
                                <div><img src="./images/icon/sina-line.png" /></div>
                            </div>
                            <div class="hr"><span>或</span></div>
                            <div class="login-form">
                                <form method="POST">
                                    <code class="check_log_phone"></code>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <span class="fa fa-user-circle-o text-success"></span>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control" id="logphone" placeholder="手机号码">
                    </div>
                                        <code class="check_log_pwd"></code>
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <span class="fa fa-unlock text-success"></span>
                                                </span>
                                            </div>
                                            <input type="password" class="form-control" id="logpwd" placeholder="密码">
                    </div>
                                            <button type="button" id="login" class="btn btn-success btn-block">登录</button>
                </form>
                                    </div>
                                    <div class="login-regist">
                                        没有帐号？<span id="ToRegist">立即注册</span>
                                    </div>
        </div>
                                <!-- 注册 -->
        <div class="regist">
                                    <div class="regist-title">
                                        手机注册<span><img src="./images/logo.png" height="40px" /></span>
                                    </div>
                                    <div class="regist-form">
                                        <form method="POST" action="">
                                            <code class="check_reg_phone"></code>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <span class="fa fa-mobile text-success"></span>
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control" name="regphone" id="regphone" placeholder="手机号码">
                    </div>
                                                <code class="check_reg_pwd"></code>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">
                                                            <span class="fa fa-unlock-alt text-success"></span>
                                                        </span>
                                                    </div>
                                                    <input type="password" class="form-control" name="regpwd" id="regpwd" placeholder="密码">
                    </div>
                                                    <code class="check_reg_pwd2"></code>
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">
                                                                <span class="fa fa-unlock-alt text-success"></span>
                                                            </span>
                                                        </div>
                                                        <input type="password" class="form-control" id="regcheckpwd" placeholder="确认密码">
                    </div>
                                                        <code class="check_reg_code"></code>
                                                        <div class="input-group mb-3">
                                                            <input type="text" class="form-control" placeholder="手机验证码" id="code" name="code">
                                                                <div class="input-group-append">
                                                                    <button type="button" class="input-group-text text-success getcode">获取验证码</button>
                                                                </div>
                    </div>
                                                            <button type="button" id="regist" class="btn btn-success btn-block">注册</button>
                </form>
                                                    </div>
                                                    <div class="otherLogin">
                                                        <div class="qq">
                                                            <img src="./images/icon/QQ.png" onclick='toQzoneLogin()' class="img-fluid" />
                                                        </div>
                                                        <div class="wx">
                                                            <img src="./images/icon/wx.png" onclick='toweChat()' class="img-fluid" />
                                                        </div>
                                                    </div>
                                                    <div class="login-login">
                                                        <span id="otherLogin">快捷登录</span>
                                                        <span id="phoneLogin">手机注册</span>
                                                        <span id="ToLogin">返回登录</span>
                                                    </div>
                                                </div>
                                            </div>
            </Fragment>
        )
    }
}

export default Login